<template>
    <transition name='fadeIn'>
        <div id="feedback">
            <!-- 头部 -->
            <my-header fixed title='用户反馈'>
                <a class="back-black" slot='left' @click='$router.go(-1)'></a>
            </my-header>
            <!-- 正文 -->
            <div class="content" :class="{isIOS: $store.state.device == 'ios'}" v-swiper:swiperRight='true'>
                <div class="feedback-textarea">
                    <textarea placeholder="请在此处写下您遇到的问题好或者对我们的建议."  cols="30" rows="10"></textarea>
                </div>
                <div class="feedback-tisp">
                     选填:  请填写您的联系方式以便我们能够及时沟通
                </div>
                <div class="feedback-input">
                    <input type="text" placeholder="微信/QQ/ 手机号/邮箱">
                </div>
                <div class="feedback-input">
                    <br><br>
                    <button class="app-btn true-app-btn">提交反馈</button>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
// 后台没有做接口，这里只是模拟一下
export default {
    name: 'feedback',
    data() {
        return {
            json: [
                {
                    type: 'robot',
                    text: '您好，欢迎反馈！请填写你对我们的建议，我们会根据用户的需求做出修改'
                }
            ],
            feebBack: '您的反馈我们已经收到了，我们会尽快处理',
            inputVal: ''
        }
    }
}
</script>
<style lang='stylus'>
#feedback {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 1000;
    background: #fff;
    overflow: hidden;
    .content {
        padding-bottom: 48px;
        .feedback-textarea{
            width: 90%;
            margin: 0 auto;
            padding-top: 20px;
            textarea{
                border: solid 1px #e4e4e4;
                width: 100%;
                display: block;
                border-radius: 5px;
                padding : 5px;
                font-size : 14px;
                outline: none;
            }
            textarea::placeholder{
                color: #9e9e9e;
                font-family :'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            }
        }
        .feedback-tisp{
            width: 90%;
            margin: 0 auto;
            color : #022222;
            padding : .5rem 0 .25rem 0;
        }
        .feedback-input{
            width: 90%;
            margin: 0 auto;
            input{
                border: solid 1px #e4e4e4;
                width: 100%;
                display: block;
                height : 40px;
                border-radius: 5px;
                padding : 5px;
                font-size : 14px;
                outline: none;
            }
            input::placeholder{
                color: #9e9e9e;
                font-family :'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            }
            .app-btn{
                width : 100%;
                height: 40px;
                border-radius: 5px;
                margin : 0 auto;
                display : block;
                margin-bottom: 10px;
                font-size: 14px;
                background : none;
            }
            .true-app-btn{
                background : #f24e4d;
                color: #fff;
            }
        }
    }
}
</style>
